<template>
  <div>
    <div class="header">
      <div class="status-bar" :style="'height:'+statusBarHeight+'px;'"></div>
      <div class="header_container" style="background-color: #fff;">
        <div class="navigationbar" :style="style">
          <div class="back" v-if="showback" :style="menuStyle">
            <text class="iconfont icon-houtui Special" @click="handleBack" :style="iconfontSize"></text>
            <div class="icon_line"></div>
            <text class="iconfont icon-zhuye Special" @click="handleToIndex" :style="iconfontSize"></text>
          </div>
          <text class="lawyer-name" :style="lawyername">{{title}}</text>
        </div>
      </div>
    </div>
    <div class="padding-bar" :style="'height:'+(height + statusBarHeight)+'px;'"></div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    showback: {
      type: Boolean,
      default: true
    },
    url: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      iconfontSize: ""
    };
  },
  computed: {
    lawyername() {
      const style = this.showback ? "text-align:center;" : "text-align:left;";
      if (this.screenWidth >= 768) {
        return style + "font-size: 25rpx;";
      } else {
        return style;
      }
    },
    menuStyle() {
      return `width: ${this.menuWidth}px;height: ${this.menuHeight - 2}px;line-height: ${this.menuHeight - 2}px;`
    },
    style() {
      // let padding = this.showback ? this.menuPaddingLeft : 0
      return `width:calc(100% - ${this.menuButtonInfo}px);height: ${this.height}px;line-height:${this.height}px;padding-left: ${this.menuPaddingLeft}px;`;
    }
  },
  methods: {
    handleBack() {
      const url = this.url;
      // console.log(url);
      if (url == "" || !url) {
        uni.navigateBack({
          delta: 1
        });
      } else if (url.indexOf("/pages") != -1) {
        uni.switchTab({
          url
        });
      } else {
        uni.navigateTo({
          url
        });
      }
      this.$emit("back");
    },
    handleToIndex() {
      uni.switchTab({
        url: "/pages/index/index"
      });
    }
  },
  created() {
    let that = this;
    uni.getSystemInfo({
      success: function(res) {
        that.screenWidth = res.windowWidth;
        let fontsize = res.fontSizeSetting > 20 ? 18 : res.fontSizeSetting;
        let height;
        if (res.platform == "ios") {
          height = 44;
        } else if (res.platform == "android") {
          height = fontsize * 3; // 安卓会受到用户设置字体大小影响
        } else if (res.platform == "devtools") {
          // devtool
          height = 44;
        } else {
          // mac和Windows
          // 特殊处理pc端的小程序
          that.height = 44;
          that.statusBarHeight = res.statusBarHeight;
          that.$store.state.navbarHeight = that.height + res.statusBarHeight;
          that.iconfontSize = "font-size: 20px;";
          // 按钮
          let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
          that.menuPaddingLeft = 10;
          that.menuButtonInfo = menuButtonInfo.width + that.menuPaddingLeft;
          that.menuWidth = menuButtonInfo.width;
          that.menuHeight = menuButtonInfo.height - 4;
          return;
        }
        if (that.screenWidth >= 768) {
          that.iconfontSize = "font-size: 20px;";
        }
        that.height = height;
        that.statusBarHeight = res.statusBarHeight;
        that.$store.state.navbarHeight = height + res.statusBarHeight;
        // console.log(res.statusBarHeight);
        // console.log(fontsize);
        // console.log(height);
        // that.$store.state.height = height;
        // that.$store.state.statusBarHeight = res.statusBarHeight;
        // 处理左侧按钮，返回和主页的胶囊
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
        that.menuPaddingLeft = that.screenWidth - menuButtonInfo.right;
        that.menuButtonInfo = menuButtonInfo.width + that.menuPaddingLeft;
        that.menuWidth = menuButtonInfo.width;
        that.menuHeight = menuButtonInfo.height;
      }
    });
  }
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  .status-bar {
    // height: var(--status-bar-height);
    width: 100%;
    background-color: #fff;
  }

  .navigationbar {
    .flex();
    width: 100%;
    color: #6d77aa;
    font-size: 36rpx;
    .back {
      .flex();
      border-radius: 25px;
      border: 0.5px solid #e5e5e5;
      .icon_line {
        width: 2rpx;
        height: 65%;
        background-color: #e5e5e5;
      }
      .iconfont {
        width: calc(50% - 1rpx);
        text-align: center;
        color: @theme-color;
        font-size: 40rpx;
        font-weight: 600;
      }
    }
    .lawyer-name {
      flex: 1;
      // text-align: center;
    }
  }
}
</style>